<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { useNoticeStore } from '@/stores/notice';

    import NoticeList from '@/components/NoticeBox/Content/List/index.vue';

    const noticeStore = useNoticeStore()

    const noticeData = computed(() => noticeStore.noticeData);
    const paramOptions = computed(() => noticeStore.paramOptions);

    const scrollBoxRef = ref();

    const handleScroll = () => {
        // 下面这部分兼容手机端和PC端
        const scrollTop = scrollBoxRef.value.scrollTop; // 滚动条的位置
        const windowHeitht = scrollBoxRef.value.clientHeight; // 在页面上返回内容的可视高度
        const scrollHeight = scrollBoxRef.value.scrollHeight; // 返回整个元素的高度（包括带滚动条的隐蔽的地方）
        // 是否滚动到底部的判断
        if (Math.round(scrollTop) + windowHeitht === scrollHeight) {
            
        }
    }

</script>
<template>
    <div class="content" ref="scrollBoxRef" @scroll="handleScroll">
        <el-skeleton :loading="noticeStore.loadnig" :rows="3" animated>
            <template #template>
                <div style="padding: 0 15px;">
                    <el-skeleton-item variant="text" />
                    <el-skeleton-item variant="text" />
                    <el-skeleton-item variant="text" style="width: 20%;" />
                </div>
            </template>
            <template #default>
                <notice-list 
                    v-if="noticeData != null && Object.keys(noticeData).length !== 0" 
                    :noticeData="noticeData" 
                />
                <div class="notice-empty" v-if="noticeData == null || Object.keys(noticeData).length === 0"> 
                    <svg-icon href='#icon-nonotice' width="200px" height="200px"></svg-icon>
                    <span style='color: #8a919f;'>暂无通知消息～</span>
                </div>
                <div class="bottom" v-if="paramOptions.isLast && noticeData != null && Object.keys(noticeData).length !== 0">
                    <span>已经到底了~~</span>
                </div>
                <div class="loading" v-if="paramOptions.loading">
                    <el-icon :size="14" class="el-icon-loading"></el-icon>加载中
                </div>
            </template>
        </el-skeleton>
    </div>
</template>
<style lang="less" scoped>
    .content {
        height: 300px;
        overflow-y: auto; /* 当内容超出容器大小时显示滚动条 */
        .notice-empty {
            display: flex;
            align-items: center;
            flex-direction: column;
            height: 100%;
            margin-top: 20px;
        }
        .bottom {
            font-size: 12px;
            padding-bottom: 10px;
            text-align: center;
            user-select: none;
        }
        .loading {
            margin: 5px;
        }
    }

    /* 定义滚动条样式 */
    .content::-webkit-scrollbar {
        width: 0;
        height: 1px;
        background: white;
        opacity: 0;
    }
    /*定义滚动条轨道*/
    .content::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
        border-radius: 10px;
        background: white;
        opacity: 0;
    }
    /*定义滑块*/
    .content::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 0px rgba(118, 118, 118, 0.5);
        background-color: rgba(118, 118, 118, 0.5);
    }

</style>